.upload-image-container {
  @apply inline-block;
}

.upload-trigger {
  @apply border border-dashed border-neutral-300 cursor-pointer relative transition-all duration-200;
}

.upload-trigger:hover {
  @apply border-blue-600;
}

.shape-square {
  @apply rounded;
}

.shape-circle {
  @apply rounded-full;
}

.shape-rectangle {
  @apply rounded;
}

.upload-placeholder {
  @apply h-full flex flex-col items-center justify-center text-gray-500;
}

.upload-text {
  @apply mt-2 text-xs;
}

.preview-image {
  @apply w-full h-full object-cover;
}

.preview-image.shape-square {
  @apply rounded;
}

.preview-image.shape-circle {
  @apply rounded-full;
}

.preview-image.shape-rectangle {
  @apply rounded;
}

.image-overlay {
  @apply absolute inset-0 w-full h-full bg-black/50 flex items-center justify-center opacity-0 transition-opacity duration-200;
}

.image-overlay.shape-square {
  @apply rounded;
}

.image-overlay.shape-circle {
  @apply rounded-full;
}

.image-overlay.shape-rectangle {
  @apply rounded;
}

.has-image:hover .image-overlay {
  @apply opacity-100;
}

.overlay-buttons {
  @apply flex gap-3;
}

.action-icon {
  @apply text-white text-xl cursor-pointer p-1 rounded transition-colors duration-200;
}

.action-icon:hover {
  @apply bg-white/10;
}

.edit-icon {
  @apply hidden;
}
